<template>
  <div id="singleTime">
    <h3 class="echarts-title">
      人均单次使用时长
      <popover :descriptionData="behaviorData"></popover>
    </h3>
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:behavior:export'"
        type="warning"
        icon="el-icon-download"
        @click="exportRoles"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <div class="table-conBtn">
      <el-radio-group v-model="identity">
        <el-radio-button
          v-for="item in identityList"
          :label="item.dictValue"
          :key="item.dictValue"
        >
          {{ item.dictLabel }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <!-- <h3 class="echarts-title">用户来源占比统计</h3>-->
    <div id="singleTimeLine" class="box"></div>
  </div>
</template>

<script>
import {
  getSearchList,
  exportUrl
} from '@/api/dataStatistics/behaviorAnalysis/index.js' // 接口
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from '@component/dataStatistics/behaviorAnalysis/topSearch' // 上部搜索条件
import popover from '@component/dataStatistics/common/popover' // 注释说明
import { getInterval } from '@utils/pubFunction'
export default {
  name: 'singleTime',
  msg: '行为分析-人均单次使用时长',
  props: ['powerAry'],
  components: {
    topSearch,
    popover
  },
  watch: {
    identity(newV, oldV) {
      /*全部/正式用户/试学用户/其他*/
      /*console.log('类型变了')*/
      this.searchList()
    }
  },
  data() {
    return {
      option: {
        legend: {
          data: [
            '120分钟以上',
            '60-120分钟',
            '30-60分钟',
            '10-30分钟',
            '5-10分钟',
            '3-5分钟',
            '1-3分钟',
            '1分钟以下(含1分钟)'
          ],
          left: 40
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            let total = 0
            params.forEach((item) => {
              total += item.value
            })
            let ary = params.map((item, index) => {
              if (item.value == undefined || item.value !== item.value) {
                item.value = 0
              }
              let percent = ((item.value / total) * 100).toFixed(2)
              // 小圆点显示
              let dotColor = `<span class="dotColor" style="background-color:${item.color}"></span>`
              return `${dotColor}${item.seriesName}：${item.value}，${percent}%</br>`
            })
            let result = `${params[0].name}</br>${ary.join('')}`
            return result
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            length: 5
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' }
        ]
      },
      singleTimeLine: null,
      formInline: {
        source: '', //来源
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      identity: '',
      identityList: [{ dictLabel: '全部用户', dictValue: '' }]
    }
  },
  computed: {
    behaviorData() {
      return this.$store.state.descriptionData.behaviorData
    }
  },
  mounted() {
    this.echartsInit()
    this.getStatusList()
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      let data = await sysNormalDisable('dataview_user_type')
      this.identityList = this.identityList.concat(data)
    },
    echartsInit() {
      this.singleTimeLine = this.echarts.init(
        document.getElementById('singleTimeLine')
      )
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.singleTimeLine.resize()
      })
      this.singleTimeLine.setOption(this.option)
    },
    /* 获取列表 */
    async searchList() {
      /*console.log('searchList')*/
      let obj = Object.assign({}, { identity: this.identity }, this.formInline)
      delete obj.createTime
      this.singleTimeLine.showLoading()
      await getSearchList(
        obj,
        (response) => {
          //计算轴间隔
          let data = response.data
          let dataLength = response.data.length
          let interval = 0
          if (dataLength > 10) {
            interval = getInterval(dataLength, 10)
          }
          //赋值
          let opt = {
            xAxis: {
              data: data,
              axisLabel: {
                interval: interval
              }
            },
            series: response.series
          }
          this.singleTimeLine.setOption(opt)
          this.singleTimeLine.hideLoading()
        },
        (response) => {
          this.singleTimeLine.hideLoading()
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 导出 */
    exportRoles() {
      this.$confirm('确定导出所有数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = exportUrl()
        let params = Object.assign(
          {},
          { identity: this.identity },
          this.formInline
        )
        delete params.createTime
        this.downFile('get', url, params, '人均单次使用时长')
      })
    },
    /* 搜索 */
    toSearch() {
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#singleTime {
  .el-radio-button__inner {
    padding: 8px 20px;
  }
  .box {
    width: 100%;
    height: 400px;
  }
  .dotColor {
    display: inline-block;
    margin-right: 5px;
    border-radius: 10px;
    width: 9px;
    height: 9px;
  }
}
</style>
